<template>
  <div class="header-box">
    <!-- 顶部 -->
    <div class="info-box">
      <div class="content-box flex jc-sb ai-c">
        <div>您好，欢迎来到江铃晶马客车整车商城！</div>
        <div class="link flex jc-sb">
          <a href="#" v-show="logininfo" @click="login()">请登录</a>
          <a href="#" v-show="!logininfo" @click="toUser()">您好,{{userinfo.nickname}}</a>
          <a href="#" v-show="!logininfo" style="color:red;font-weight: bold"  @click="loginout()">退出</a>
          <a href="#" v-show="logininfo" style="color:red;font-weight: bold"  @click="register()">注册</a>
          <a href="#">手机商城</a>
          <!--<a href="#">全景看车</a>-->
          <a href="http://www.jmmc.com.cn" target="_blank">晶马官网</a>
          <a href="#/user/BuyCarHelp">购车助手</a>
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="nav-box">
      <div class="content-box flex jc-sb ai-c">
        <img src="@/assets/logo.jpg" class="logo"   @click="toHome()"/>
        <div class="nav-list flex-1 flex jc-sb">
          <router-link :to="{ path: '/newProduct' }">新品预售</router-link>
          <router-link :to="{ path: '/Customization' }">深度定制</router-link>
          <router-link :to="{ path: '/#' }">首页</router-link>
          <router-link :to="{ path: '/CarCenter' }">整车中心</router-link>
          <router-link :to="{ path: '/FinanceSupport' }">金融支持</router-link>
          <router-link :to="{ path: '/buyCar' }">在线购车</router-link>
        </div>
        <el-input
          class="search"
          placeholder="公交车  客车  校车  公商务车"
          clearable
          round
          size="small"
          v-model="search"
          @input="onInput()"
          @keyup.enter.native="toCarCenter()"
        ></el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      props:['keyword'],
      search: "",
        logininfo:true,
        userinfo:{},
    };
  },
   created(){
      if(localStorage.getItem('token')){
        this.logininfo = false;
        console.log(this.userinfo)
        this.userinfo  = JSON.parse(localStorage.getItem('userinfo'));
      }
       (function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/76df7a37aaeedb720ea6c829254a932a0/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();

   }
   ,methods:{
      toUser(){
          this.$router.push("/user")
      },
      login(){
          this.$router.push({ path: '/login'})
      },
      toHome(){
          this.$router.push({ path: '/'})
      },
      toCarCenter(){
          if(this.$route.path !=='/CarCenter'){
              this.$router.replace({ path: '/CarCenter',query:{'keyword':this.search}})
          }
      },
      onInput(){
        this.$emit('update:keyword',this.search)
      },
      loginout(){
        localStorage.removeItem('token');
        localStorage.removeItem('userinfo');
        this.$router.push({ path: '/login'})
      },
      register(){
        localStorage.removeItem('token');
        localStorage.removeItem('userinfo');
        this.$router.push({ path: '/register'})
      }
  }
};
</script>

<style lang="scss" scoped>
.header-box {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9;
}
.logo{
  cursor: pointer;
}
.info-box {
  height: 34px;
  background-color: #2e2828;
  color: #f0f0f0;
  font-size: 14px;
  .link {
    width: 446px;
  }
  a {
    color: #afafaf;
  }
}
.nav-box {
  height: 75px;
  background-color: #ffffff;
  .nav-list {
    padding: 0 60px 0 50px;
  }
  .search {
    width: 300px;
  }
  a {
    color: #333333;
    font-size: 16px;

    &:first-child,
    &:nth-child(2) {
      width: 80px;
      line-height: 28px;
      background-color: #ff8486;
      border-radius: 13px;
      color: #ffffff;
    }
    &:nth-child(2) {
      background-color: #007eff;
    }
  }
}


/**手机端**/ 
@media (min-width: 320px) and (max-width: 800px){
  .header-box {
    .info-box{
      display: none;
    }
  }
  .content-box{
    width: 100%;
  }
  .nav-list {
    display: none;
  }
  .search {
    display: none;
  }
}
</style>